<template>
  <div class="allocation">
    <el-button @click="show" type="success" icon="el-icon-s-custom" size="small">{{$t('m.subscription.distribution')}}</el-button>
    <el-dialog
      :title="$t('m.subscription.distribution')+'---'+personnelItem.userDisplayName+'('+personnelItem.departmentName+')'"
      :visible.sync="dialogFormVisible"
      width="420px"
    >
      <el-form :model="form">
        <el-form-item :label="$t('m.label.country')" label-width="80px">
          <el-select v-model="form.countryId" @change="getfindBu" :placeholder="$t('m.placeholder.selectCountry')">
            <el-option
              :label="item.countryName"
              :value="item.countryId"
              v-for="item in findCountrys"
              :key="item.countryId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('m.label.BU')" label-width="80px">
          <el-select
            v-model="form.businessUnitId"
            multiple
            collapse-tags
            @change="getfindCategoryByBu"
            :placeholder="$t('m.placeholder.selectBu')"
          >
            <allAddDelSelect
              :selectForm="form"
              :selectArray="findBu"
              selectFormId="businessUnitId"
              selectArrayId="businessUnitId"
              @selectAll="getfindCategoryByBu"
              @selectDel="getfindCategoryByBu"
              size="mini"
            ></allAddDelSelect>
            <el-option
              :label="item.businessUnit"
              :value="item.businessUnitId"
              v-for="item in findBu"
              :key="item.businessUnitId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('m.label.productCategory')" label-width="80px">
          <el-select
            v-model="form.productId"
            multiple
            collapse-tags
            filterable
            @change="getfindModelNumberByCategoryId"
            :placeholder="$t('m.placeholder.selectCategory')"
          >
            <allAddDelSelect
              :selectForm="form"
              :selectArray="findCategoryByBu"
              selectFormId="productId"
              selectArrayId="productCategoryId"
              @selectAll="getfindModelNumberByCategoryId"
              @selectDel="getfindModelNumberByCategoryId"
              size="mini"
            ></allAddDelSelect>
            <el-option
              :label="item.productCategory"
              :value="item.productCategoryId"
              v-for="item in findCategoryByBu"
              :key="item.productCategoryId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('m.label.productModelNumber')" label-width="80px">
          <el-select
            v-model="form.productModelNumber"
            filterable
            multiple
            collapse-tags
            :placeholder="$t('m.placeholder.selectProductModelNumber')"
          >
            <allAddDelSelect
              :selectForm="form"
              :selectArray="modelNumbers"
              selectFormId="productModelNumber"
              selectArrayId="productId"
              size="mini"
            ></allAddDelSelect>
            <el-option
              :label="item.productModelNumber"
              :value="item.productId"
              v-for="item in modelNumbers"
              :key="item.productId"
            ></el-option>
            <div class="select-button-bac">
              <el-button
                type="primary"
                @click="addlistInsert()"
                class="select-button"
                size="mini"
              >{{$t('m.button.addTo')}}</el-button>
            </div>
            <div class="select-button-height"></div>
          </el-select>
        </el-form-item>
      </el-form>
      <el-table :data="productList" max-height="300px">
        <el-table-column prop="countryName" :label="$t('m.label.country')"></el-table-column>
        <el-table-column prop="productModelNumber" :label="$t('m.label.productModelNumber')"></el-table-column>
        <el-table-column prop="username" :label="$t('m.label.principal')"></el-table-column>
        <el-table-column :label="$t('m.label.operating')" >
          <template slot-scope="scope">
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              @click="deletelistInsert(scope.row)"
            >{{$t('m.button.delete')}}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">{{$t('m.button.confirm')}}</el-button>
        <el-button type="primary" @click="submit()">{{$t('m.button.cancel')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
const ERR_OK = 200;
export default {
  props: ["personnelItem"],
  data() {
    return {
      dialogFormVisible: false,
      findCountrys: [],
      findBu: [],
      findCategoryByBu: [],
      modelNumbers: [],
      form: {
        countryId: "",
        businessUnitId: [],
        productId: [],
        productModelNumber: []
      },
      productList: [],
      tableData: []
    };
  },
  created() {
    this.getfindCountrys();
  },
  methods: {
    //   获取国家
    getfindCountrys() {
      this.$ajax(
        
          this.GLOBAL.productService +
          "/Personal/findCountrys"
      ).then(res => {
        if (res.data.code === ERR_OK) {
          this.findCountrys = res.data.data.data;
        }
      });
    },
    //获取BU
    getfindBu() {
      this.form.productId = [];
      this.form.businessUnitId = [];
      this.form.productModelNumber = [];
      this.$ajax
        .get(
          
            this.GLOBAL.productService +
            "/Personal/findBu?countryId=" +
            this.form.countryId
        )
        .then(res => {
          if (res.data.code === ERR_OK) {
            this.findBu = res.data.data.BU;
            this.modelNumbers = res.data.data.modelNumbers;
          }
        });
    },
    //获取产品系列
    getfindCategoryByBu() {
      this.findCategoryByBu = [];
      this.modelNumbers = [];
      this.form.productId = [];
      this.form.productModelNumber = [];
      if (this.form.businessUnitId.length === 0) {
        return;
      }
      this.$ajax(
        
          this.GLOBAL.productService +
          "/Personal/findCategoryByBu?bus=" +
          this.form.businessUnitId.join() +
          "&countryId=" +
          this.form.countryId
      ).then(res => {
        if (res.data.code === ERR_OK) {
          this.findCategoryByBu = res.data.data.category;
          this.modelNumbers = res.data.data.modelNumbers;
        }
      });
    },
    //获取产品型号
    getfindModelNumberByCategoryId() {
      this.form.productModelNumber = [];
      this.$ajax
        .get(
          
            this.GLOBAL.productService +
            "/Personal/findModelNumberByCategoryId?categoryIds=" +
            this.form.productId.join() +
            "&countryId=" +
            this.form.countryId
        )
        .then(res => {
          if (res.data.code === ERR_OK) {
            this.modelNumbers = res.data.data.data;
          }
        });
    },
    // 添加列表
    addlistInsert() {
      this.productList = [];
      this.form.productModelNumber.forEach(item => {
        this.productList.push({
          productId: item,
          productModelNumber: this.modelNumbers.filter(
            items => items.productId === item
          )[0].productModelNumber,
          countryId: this.form.countryId,
          countryName: this.findCountrys.filter(
            items => items.countryId === this.form.countryId
          )[0].countryName,
          username: this.personnelItem.userDisplayName,
          userId: this.personnelItem.userId
        });
      });
    },
    // 删除列表
    deletelistInsert(row) {
      this.productList.splice(
        this.productList.findIndex(item => item.productId === row.productId),
        1
      );
    },
    // 提交列表
    submit() {
      if (this.productList.length > 1) {
        this.$ajax({
          method: "post",
          url:
            
            this.GLOBAL.productService +
            "/productSubscriptionUserRel/saveProductListByUserCharge",
          data: this.productList
        }).then(res => {
          if (res.data.code === ERR_OK) {
            this.$message.success("添加成功");
            this.dialogFormVisible = false;
            this.$emit("personnel", this.personnelItem);
          } else {
            this.$message.error(res.data.msg);
          }
        });
      } else {
        this.$message.warning("请添加列表");
      }
    },
    show() {
      this.productList = [];
      this.dialogFormVisible = true;
    }
  },
  components: { 
    allAddDelSelect: resolve =>
      require(["@/components/SearchSelect/Button.vue"], resolve)
  }
};
</script>
<style lang="less" scoped>
.allocation {
  display: inline-block;
}

.select-button {
  margin-top: 5px;
}

.select-button-bac {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  width: 100%;
  background: #ffffff;
  height: 38px;
  text-align: center;
}

.select-button-height {
  height: 38px;
}
</style>
